<!DOCTYPE html>
<html base="/" lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <link rel="stylesheet" href="/static/login/css/login.css?k=2">
</head>
<body>
<div id="canvas-cont"></div>
<div class="content-div">

    <!---圆角框-->
    <p class="line"></p>

    <!--欢迎词-->
    <!-- <p class="welcome">登陆</p> -->

    <div class="flex borderBox item">
        <img src="/static/login/img/user.png" alt="">
        <input type="text" name="name" value="" placeholder="用户名" class="user">
    </div>
    <div class="flex borderBox item">
        <img src="/static/login/img/pass.png" alt="">
        <input type="password" name="password" value="" placeholder="密码" class="pass">
    </div>
    <div class='borderBox item' id="vaptchaContainer">
        <div class="vaptcha-init-main">
            <div class="vaptcha-init-loading">
                <a href="https://www.vaptcha.com" target="_blank">
                    <img src="https://cdn.vaptcha.com/vaptcha-loading.gif"/>
                </a>
                <span class="vaptcha-text">Vaptcha启动中...</span>
            </div>
        </div>

    </div>
    <!--  <div class="flex borderBox item">
        <img src="/static/login/img/pass.png" alt="" >
        <input autocomplete="off" type="captcha" value="" name="captcha" placeholder="验证码" class="captcha">
    </div>
    <div>
        <img id="captchaImg" src="{:captcha_src()}" onclick="this.src='/captcha?id='+Math.random()" alt="验证码" title="点击刷新" style="cursor: pointer">
        <p>点击图片刷新</p>
    </div> -->

    <p class="btn">登陆</p>

    <!--提示-->
    <p class="borderBox tip"></p>
</div>
<script src='/static/login/js/jquery-3.2.1.min.js'></script>
<script src="https://v.vaptcha.com/v3.js"></script>
<script src="/static/login/js/canvas-particle.js"></script>
<script>
    vaptcha({
        vid: "{$data['vid']}", // 验证单元id
        type: "{$data['type']}", // 显示类型 嵌入式
        https: false,
        scene: 0, //不填默认为0
        container: '#vaptchaContainer', // 容器，可为Element 或者 selector
        offline_server: 'http://xy.xiyuezuqiu.cn/admin/login/vaptcha', //离线模式服务端地址
        // mode: 'offline' // 测试离线模式时使用
    }).then(function (vaptchaObj) {
        obj = vaptchaObj;//将VAPTCHA验证实例保存到局部变量中
        vaptchaObj.render()
        vaptchaObj.listen('pass', function () {
            var data = {
                token: vaptchaObj.getToken(),
                scene: 0
            }
            $.post('/admin/login/vaptcha', data, function (r) {
                if (r.code !== 1) {
                    console.log('登录失败');
                    vaptchaObj.reset(); //重置验证码
                }
            })
        })
    })


    //点击登陆
    $('p.btn').click(function(e){
        e.stopPropagation();
        var user = $('.user').val().trim();
        var pass = $('.pass').val().trim();

        if(!user || !pass){
            showToast('请输入用户名或密码');
            return;
        };
        //console.log(user, pass)
        if(/<([\s\S])+>/gi.test(user)){
            showToast('输入用户名不合法');
            return;
        };
        if(/<([\s\S])+>/gi.test(pass)){
            showToast('输入用户名不合法');
            return;
        };
        if(/<([\s\S])+>/gi.test(pass)){
            showToast('输入用户名不合法');
            return;
        };

        if(!token){
            showToast('验证码未通过');
            return;
        };

        var data = {
            name: user,
            password: pass,
            token: token
        };
        $.post('/admin/login/dologin',data).then(function(res) {
            if(res.code==0) {
                window.location.href = res.data;
            }else{
                showToast(res.message);
                vaptchaInit();
            }
        })
    });



    let timer;
    function showToast(txt){
        let $tipEle = $('.tip');
        $tipEle.text(txt).css({display: 'block'});
        if(timer){
            clearTimeout(timer);
            timer = null;
        };
        timer = setTimeout(function(){
            $tipEle.css({display: 'none'});
        },2000);
    }

    CanvasParticle();
</script>
</body>
</html>